<template>
  <div>
      <!-- 头部 -->
    <div class="w-header">
      <div class="w-xhead">
          <i @click="zhu()"></i>
        <span>关注公众号</span>
      </div>
    </div>
    <div class="w">
    <!-- main -->
      <div class="w-main">
          <div class="wxin">
              <span>微信服务号</span>
              <span>aladeng</span>
              <span>长按可复制</span>
              <div class="bgc"></div>
              <div class="text">您可以：通过微信”扫一扫”扫描上方二维码，找到我们</div>
          </div>
           <div class="text2">
                  关注阿拉灯微信服务号<br/><span class="da">发货、物流、补货</span>通知早知道
           </div>
          
        
      </div>
    </div>
  </div>
  
</template>

<script>
export default {
  name:'Register',
  data(){
    return {
      msg:true,
      arr:['微信服务号','aladeng']
    }
  },
  methods:{
    zhu(){
      this.$router.replace('/');
    },
    wphone(){
      this.msg=false;
    },
    wyan(p){
      if(p.length!=11){
        alert('请输入正确的电话号码');
      }else{
        console.log(p);
         var reg=/^1[3456789]\d{9}$/;
        if(!(reg.test(p))){ 
          alert("手机号码有误，请重填");  
          return false; 
        }else{
          console.log('手机号码格式正确');
        }
      }
    }
  }
}
</script>

<style scoped>

/* main */
.w-main{
    margin-top: 14rem;
}
.wxin{
    position: relative;
}
.wxin span{
    display: block;
}
.wxin span:nth-child(1){
    color: #4c4c4c;
    font-size: 2.8rem;
    margin-bottom: 0.7rem;
}
.wxin span:nth-child(2){
    color: #e53e42;
    font-size: 2.8rem;
}
.wxin span:nth-child(3){
    color: #808080;
    font-size: 2.4rem;
    margin-bottom: 10.5rem;
}
.bgc{
    position: relative;
    left: 50%;
    margin-bottom: 5.5rem;
    transform: translateX(-25.1rem);
    height: 43.1rem;
    width: 50.2rem;
    background: url(../../assets/user/user-ma.png) no-repeat 0 0;
}
.text{
    width: calc(100% - 8rem);
    margin: 0 4rem 5rem;
    height: 10.6rem;
    line-height: 10.6rem;
    font-size: 2.4rem;
    color: #666;
    border-bottom: 0.2rem solid #ccc;
}
.text2{
    color: #666;
    font-size: 2.4rem;
    /* outline: 1px solid #f00; */
    line-height: 3.8rem;
}
.da{
    color: #4c4c4c;
    font-size: 2.8rem;
}
/* 头部 */
.w-header{
  background-color: #e53e42;
  width: 100%;
  height: 9.6rem;
  color: #fff;
  font-size: 3.6rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
}
.w-xhead{
  height:9.6rem;
  width:calc(100% - 4rem) ;
  padding: 0 2rem;
  line-height: 9.6rem;
  position: relative;
}
.w-xhead i{
    height: 3.8rem;
    width: 3.8rem;
    position: absolute;
    top: 50%;
    left: 1.3rem;
    transform: translateY(-1.9rem);
    background: url(../../assets/user/user-wback.png) no-repeat 0 0;
}
/* 头部 */
.w{
  width: calc(100% - 4rem);
  padding: 0 2rem;
}
</style>